import Taro, { Component } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
import './index.scss'
import classNames from 'classnames'
import { calcSurplusTime, headImg, getGoodsStatus } from "@/utils/utils"
import { toGoodsPage } from '@/utils/page_router'

interface IProps {
  list: any
}

/**
 * 自定义列表展示6
 */
export default class Index extends Component<IProps, {}> {
  props: any
  timer: any

  static options = {
    addGlobalClass: true
  }

  constructor(props) {
    super(...arguments)
    this.state = {
      dataList: props.list
    }
    this.timer = undefined
  }

  componentDidMount() {
    this.setTimer()
  }

  componentWillReceiveProps(nextProps) {
    if (JSON.stringify(this.props) === JSON.stringify(nextProps)) {
      return false
    }
    console.log('-------------------------------- nextProps --------------------------------')
    this.setState({
      dataList: nextProps.list
    }, () => {
      this.clearTimer()
      this.setTimer()
    })
  }

  /**
   * 开启倒计时
   */
  setTimer() {
    if (!this.timer) this.countdown()
  }

  /**
   * 清除计时器
   */
  clearTimer() {
    if (this.timer) {
      clearTimeout(this.timer as number)
      this.timer = undefined
    }
  }

  /**
   * 倒计时
   */
  countdown() {
    const { dataList }:any = this.state
    let end_time = 0
    const arr = dataList.map(item => {
      getGoodsStatus(item, 1)
      item.countdown = item.countdown ? item.countdown : item.seconds
      item.countdown--
      end_time = item.countdown > end_time ? item.countdown : end_time
      return { ...item, ...calcSurplusTime(item.countdown) }
    })

    this.setState({
      dataList: arr
    })

    if (end_time <= 0) {
      this.clearTimer()
      return
    }

    this.timer = setTimeout(() => {
      this.countdown()
    }, 1000)
  }

  /**
   * 格式化时间
   * @param num
   */
  formatNum(num: number) {
    return num <= 9 ? `0${num}` : `${num}`
  }

  render() {
    const { dataList=[] }:any = this.state
    return (<View className='custom-six d-f f-d-c'>
      <View className='goods-list'>
        {dataList.map(goods => {
          return (<View key={goods.id} className='goods-item d-f' onClick={() => toGoodsPage(goods)}>
            <View className='goods-img'>
              <Image src={headImg(goods.images)} lazyLoad/>
              {goods.salesNumber && <View className='sold-num'>{goods.salesNumber}件已售</View>}
            </View>
            <View className='goods-box d-f f-d-c j-c-b'>
              <View className='goods-head'>
                <View className='goods-name'>
                  <View className='name-text t-o-e-2'>{goods.name}</View>
                </View>
                <View className='count-down'>
                  <View className='count-down__left l-h-one bnn-member'>{goods.statusName}</View>
                  <View className='count-down__triangle'/>
                  <View className='count-down__right l-h-one bnn-member'>
                    {goods.day ? `${this.formatNum(goods.day)}天` : ''} {this.formatNum(goods.hours)}:{this.formatNum(goods.minutes)}:{this.formatNum(goods.seconds)}
                  </View>
                </View>
              </View>
              <View className='goods-foot d-f a-i-f-e j-c-b'>
                <View className='sale-price bnn-number'>￥{goods.salePrice}</View>
                <View className={classNames('goods-btn', {
                  ['disabled-btn']: goods.disabled
                })}>立即购买</View>
              </View>
            </View>
          </View>)
        })}
      </View>
    </View>)
  }
}
